<template>
    <div class="newitem" @click="socketview">
        <div class="headimg">
            <slot name="headimg"></slot>
        </div>
        <div class="text">
            <div class="username">
                <slot name="username"></slot>
            </div>
            <div class="newnew">
                <span>{{lastinfor.infortext}}</span>
            </div>
        </div>
        <div class="newother">
          <div class="newtime">
              <span>{{sendtime}}</span>
          </div>
          <div class="newnum" v-if="nolookinfor">
              <span >{{nolookinfor}}</span>
          </div>
        </div>
    </div>
</template>

<script>
// import axios from 'axios';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
  name: 'Newitem',
  props: ['call'],
  setup(props) {
    const Store = useStore();
    const router = useRouter();
    // 获得该好友的最后一条信息
    const lastinfor = computed(() => Store.getters.lastinfor(props.call));
    // 时间戳转换为日期
    function timestampToTime(time) {
      const date = new Date(time);
      // // var y = date.getFullYear() + '年';
      // let M = date.getMonth() + 1;
      // M = (M < 10 ? '0' + M : M) + '-';
      // let d = date.getDate();
      // d = (d < 10 ? '0' + d : d) + '日';
      let h = date.getHours();
      h = h < 10 ? `0${h}:` : `${h}:`;
      let m = date.getMinutes();
      m = m < 10 ? `0${m}` : `${m}`;
      return h + m;
    }
    const sendtime = computed(() => timestampToTime(lastinfor.value.sendtime));
    // 未读消息数
    // const nolookinfor = computed(() => Store.getters.nowatchinfor(props.call));
    const nolookinfor = computed(() => {
      if (Store.state.information.infors[props.call]) {
        const lasttime = Store.state.information.infors[props.call].time;
        return Store.state.information
          .infors[props.call].text.filter((item) => item.sendtime > lasttime).length;
      }
      return 0;
    });
    function socketview() {
      // 正在进行通信的好友的callcode，存放在vuex中
      Store.commit('STORAGEISSOCKET', props.call);

      // 改变看该好友消息的最后一次的时间
      Store.commit('CHOOSETIME', props.call);

      // 跳转到发送消息的页面
      router.push({
        name: 'Socketview',
        query: {
          calltoken: props.call,
        },
      });
      // 检测是否有该好友的socketid
      // const yorn = Store.state.friendsocketid.some((item) => item.callcode === props.call);
      // if (yorn) {
      //   router.push({
      //     name: 'Socketview',
      //     query: {
      //       calltoken: props.call,
      //     },
      //   });
      // }
      // if (!yorn) {
      //   // 获取token值
      //   const token = JSON.parse(window.sessionStorage.getItem('token'));
      //   // 进入聊天界面之前，发送请求，获得该好友的socketid
      //   axios({
      //     // 方法
      //     method: 'post',
      //     // 请求地址
      //     url: 'http://localhost:5001/other/obtainsocketid',
      //     // token验证的请求头
      //     headers: { authorization: token },
      //     data: {
      //       fcallcode: props.call,
      //     },
      //   }).then(
      //     (response) => {
      //       if (response.data.status === 2) {
      //         // 储存用户电话和socketid信息到vuex
      //         Store.commit('STORAGESOCKETID', response.data.callsocketid);
      //         router.push({
      //           name: 'Socketview',
      //           query: {
      //             calltoken: props.call,
      //           },
      //         });
      //       }
      //       if (response.data.status === 1) {
      //         // eslint-disable-next-line
      //         window.alert(response.data.message);
      //       }
      //     },
      //     (error) => {
      //       console.log('获取用户信息失败', error.message);
      //     },
      //   );
      // }
    }
    return {
      socketview,
      lastinfor,
      sendtime,
      nolookinfor,
    };
  },
};
</script>

<style scoped>
    .newitem{
        display: flex;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #ffffff;
    }
    .headimg{
        flex: 1;
        line-height: 60px;
        border-radius: 50%;
    }
    .text{
        flex: 4;
        padding: 10px;
        text-align: left;
    }
    .username{
        font-size: 15px;
        font-weight: 700;
    }
    .newnew{
        margin-top: 3px;
        font-size: 15px;
        color: #8b8b8b;
    }
    .newother{
        flex: 1;
        padding: 10px 2px;
        font-size: 12px;
        color: #4e4e4e;
    }
    .newnum{
      width: 20px;
      height: 20px;
      line-height: 20px;
      margin: 5px auto 0px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 50%;
      background-color: #ff0000;
      color: #ffffff;
    }
</style>
